<template>
    <div class="hello">

        <div class="upload">
            <div class="upload_warp">
                <div class="upload_warp_left" @click="fileClick">
                    <img src="./upload.png">
                </div>
                <div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
                    或者将文件拖到此处
                </div>
            </div>
            <div class="upload_warp_text">
                选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}       <span >上传进度:{{progress}}</span>
            </div>
            <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

            <div class="upload_warp_img" v-show="imgList.length!=0">
                <draggable element="div" v-model="imgList">

                <div class="upload_warp_img_div" v-for="(item,index) of imgList">

                    <div class="upload_warp_img_div_top">
                        <div class="upload_warp_img_div_text" style="text-align:center" >
                            <img src="./xianshi.png" v-if="item.isDisplay==1" class="upload_warp_img_div_xianshi" @click="nodisplay(index)">
                            <img src="./buxianshi.png" v-if="item.isDisplay==0" class="upload_warp_img_div_xianshi" @click="display(index)">
                        </div>
                        <img src="./del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
                    </div>
                    <img :src="item.img">
                    <input  type="hidden" id="slider"  name="slider" v-model="imglistvalue" class="form-control title" placeholder="文件路径">
                </div>
                </draggable>
            </div>
        </div>
    </div>
</template>

<script>

    import draggable from 'vuedraggable'
    import axios from  'axios'
    export default {
        name: "image2",
        props: ['tagvalue'],
        components: {
            draggable,
        },
        data(){
            return {
                    imgList: this.danamicValue(),
                    size: 0,
                    progress:0
            }
        },
        created(){
            console.log(1111)
        },
        computed:{
          imglistvalue(){

              return JSON.stringify(this.imgList)
          }
        },
        methods: {
            danamicValue(){
                if (this.tagvalue==''){
                    return [];
                }
                let data= JSON.parse(this.tagvalue)



                return data;
                if(this.tagvalue.length==0){
                    return [];
                }else {


                    return data;
                }

            },
            fileClick() {
                console.log(2222)
                document.getElementById('upload_file').click()
            },
            fileChange(el) {
                if (!el.target.files[0].size) return;
                this.fileList(el.target);
                el.target.value = ''
            },
            fileList(fileList) {
                let files = fileList.files;
                for (let i = 0; i < files.length; i++) {
                    //判断是否为文件夹
                    if (files[i].type != '') {
                        this.fileAdd(files[i]);
                    } else {
                        //文件夹处理
                        this.folders(fileList.items[i]);
                    }
                }
            },
            display(index){
              this.imgList[index].isDisplay=1
            },
            nodisplay(index){
             this.imgList[index].isDisplay=0
            },
            //文件夹处理
            folders(files) {
                let _this = this;
                //判断是否为原生file
                if (files.kind) {
                    files = files.webkitGetAsEntry();
                }
                files.createReader().readEntries(function (file) {
                    for (let i = 0; i < file.length; i++) {
                        if (file[i].isFile) {
                            _this.foldersAdd(file[i]);
                        } else {
                            _this.folders(file[i]);
                        }
                    }
                })
            },
            foldersAdd(entry) {
                let _this = this;
                entry.file(function (file) {
                    _this.fileAdd(file)
                })
            },
            fileAdd(file) {
                //总大小
                this.size = this.size + file.size;
                //判断是否为图片文件
                if (file.type.indexOf('image') == -1) {
                    file.src = 'wenjian.png';
                    this.imgList.push({
                        file
                    });
                } else {
                    let reader = new FileReader();
                    reader.vue = this;
                    reader.readAsDataURL(file);
                    let param = new FormData();
                    param.append("name", "wiiiiiinney");
                    param.append("file", file);
                    let config = {
                        //添加请求头
                        headers: { "Content-Type": "multipart/form-data" },
                        //添加上传进度监听事件
                        onUploadProgress: e => {
                            var completeProgress = ((e.loaded / e.total * 100) | 0) + "%";

                            this.progress = completeProgress;
                        }
                    };
                    axios.post('/api/upload', param, config).then(
                        response=>{
                            if (response.data.status==1){
                                this.imgList.push({
                                    img:response.data.path,
                                    isDisplay:1
                                });
                            }else{
                                alert('上传失败')
                            }
                         }
                        )
                        .catch(function (error) {
                            console.log(error);
                        });

                    }
                }
            ,
            fileDel(index) {
                this.imgList.splice(index, 1);
            },
            bytesToSize(bytes) {
                if (bytes === 0) return '0 B';
                let k = 1000, // or 1024
                    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                    i = Math.floor(Math.log(bytes) / Math.log(k));
                return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
            },
            dragenter(el) {
                el.stopPropagation();
                el.preventDefault();
            },
            dragover(el) {
                el.stopPropagation();
                el.preventDefault();
            },
            drop(el) {
                el.stopPropagation();
                el.preventDefault();
                this.fileList(el.dataTransfer);
            }
        }
    }
</script>

<style scoped>
    .upload_warp_img_div_del {
        position: absolute;
        top: 6px;
        width: 16px;
        right: 4px;
    }
    .upload_warp_img_div_xianshi{
        position: absolute;
        top: 6px;
        width: 16px;
        left: 50px;
    }
    .upload_warp_img_div_top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.4);
        line-height: 30px;
        text-align: left;
        color: #fff;
        font-size: 12px;
        text-indent: 4px;
    }

    .upload_warp_img_div_text {
        white-space: nowrap;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .upload_warp_img_div img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }

    .upload_warp_img_div {
        position: relative;
        height: 100px;
        width: 120px;
        border: 1px solid #ccc;
        margin: 0px 30px 10px 0px;
        float: left;
        line-height: 100px;
        display: table-cell;
        text-align: center;
        background-color: #eee;
        cursor: pointer;
    }

    .upload_warp_img {
        border-top: 1px solid #D2D2D2;
        padding: 14px 0 0 14px;
        overflow: hidden
    }

    .upload_warp_text {
        text-align: left;
        margin-bottom: 10px;
        padding-top: 10px;
        text-indent: 14px;
        border-top: 1px solid #ccc;
        font-size: 14px;
    }

    .upload_warp_right {
        float: left;
        width: 57%;
        margin-left: 2%;
        height: 100%;
        border: 1px dashed #999;
        border-radius: 4px;
        line-height: 130px;
        color: #999;
    }

    .upload_warp_left img {
        margin-top: 32px;
    }

    .upload_warp_left {
        float: left;
        width: 40%;
        height: 100%;
        border: 1px dashed #999;
        border-radius: 4px;
        cursor: pointer;
    }

    .upload_warp {
        margin: 14px;
        height: 130px;
    }

    .upload {
        border: 1px solid #ccc;
        background-color: #fff;
        width: 650px;
        box-shadow: 0px 1px 0px #ccc;
        border-radius: 4px;
    }

    .hello {
        width: 650px;

        text-align: center;
    }
</style>
